<template>
  <div class="defineVariation">
    <el-row>
      <el-col :span="24">
        <dynForm
          :info-form="infoForm"
          :search-tags="searchTags"
          :select-list="selectList"
        >
          <!-- <el-form-item :label="$t('periodRange')">
            <div class="input-append">
              <el-input placeholder="请输入周期范围"/>
              <span>~</span>
              <el-input placeholder="请输入周期范围"/>
            </div>
          </el-form-item> -->
          <el-button type="primary" icon="el-icon-search" @click="doSearch">
            {{ $t("search") }}</el-button
            >
        </dynForm>
      </el-col>
    </el-row>
    <div class="table-buttons">
      <!-- v-btnPermission:add -->
      <el-button v-btnPermission:add type="primary" icon="el-icon-plus" @click="doAdd">
        {{ $t("add") }}</el-button
        >
      <!-- v-btnPermission:edit -->
      <el-button
        v-btnPermission:edit
        :disabled="UpdateDisabled"
        type="primary"
        icon="el-icon-edit"
        @click="handleEdit"
      >
        {{ $t("modify") }}</el-button
        >
      <!-- v-btnPermission:delete -->
      <el-button
        v-btnPermission:delete
        :disabled="DeleteDisabled"
        type="danger"
        icon="el-icon-delete"
        @click="handleDelete"
      >{{ $t("delete") }}</el-button
      >
    </div>
    <el-card shadow="never">
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
      <pagination
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        :total="total"
        @pagination="onChangePage"
      />
    </el-card>
    <defineModel ref="defineModel" @initList="initList" />
  </div>
</template>
<script>
import mySetting from '@/mixins/mySetting'
import defineModel from './components/TheDefineModel.vue'
import { getList, doDelete, getPackageTypeList } from '@/api/auto-analyze-warning/defineVariation'
export default {
  name: 'DefineVariation',
  components: { defineModel },
  mixins: [mySetting],
  data() {
    const searchTags = [
      { label: this.$t('processSpecificationNumber'), prop: 'processSpecificationNo', tag: 'DynInput' },
      { label: this.$t('productName'), prop: 'productType', tag: 'DynInput' },
      { label: this.$t('customer'), prop: 'custCode', tag: 'DynInput' },
      { label: this.$t('packageType'), prop: 'packageType', tag: 'DynSelect' },
      { label: this.$t('userBatchNumber'), prop: 'custLotId', tag: 'DynInput' }
    ]
    const tableColumns = [
      { prop: '', label: '', type: 'selection' },
      {
        prop: '',
        label: this.$t('index'),
        type: 'index',
        width: '50px',
        templete: (_scope) => {
          return (
            <span>
              {(this.listQuery.page - 1) * this.listQuery.size +
                _scope.$index +
                1}
            </span>
          )
        }
      },
      {
        prop: 'processSpecNo',
        label: this.$t('processSpecificationNumber')
      },
      { prop: 'processFlow', label: this.$t('processNo') },
      { prop: 'custCode', label: this.$t('customer') },
      { prop: 'productType', label: this.$t('productName') },
      { prop: 'packageType', label: this.$t('packageType') },
      { prop: 'custLotId', label: this.$t('userBatchNumber') },
      { prop: 'cycle', label: this.$t('cycle') },
      { prop: 'ruleDesc', label: this.$t('includesRules') },
      {
        prop: '',
        label: this.$t('details'),
        templete: (_scope) => {
          return (
            <el-link
              type='primary'
              underline={false}
              onClick={() =>
                this.$refs.defineModel.handleOpen(_scope.row, true, true)
              }
            >
              {this.$t('details')}
            </el-link>
          )
        }
      }
    ]
    return {
      infoForm: {},
      selectList: {},
      searchTags: Object.freeze(searchTags),
      tableColumns: Object.freeze(tableColumns),
      tableLoading: true
    }
  },
  created() {
    this.initList()
    this.getPackageTypes()
  },
  methods: {
    async initList() {
      const res = await getList(
        this.$clearNull({ ...this.listQuery, ...this.infoForm })
      )
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    doAdd() {
      this.$refs.defineModel.handleOpen()
    },
    handleEdit() {
      this.$refs.defineModel.handleOpen(this.multipleSelection[0], true)
    },
    handleDelete() {
      this.$confirm(
        `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t(
          'recordCount'
        )}?`,
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map((ele) => ele.id)
        doDelete({ ids }).then((res) => {
          this.$betterTips(res, this.setOnePage, this.initList)
        })
      })
    },
    onChangePage(page) {
      this.listQuery = page
      this.initList()
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    async getPackageTypes() {
      const res = await getPackageTypeList()
      this.$set(this.selectList, 'packageType', res.data)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
.input-append {
  display: flex;
  span {
    padding: 0 10px;
  }
}
</style>
